<template>
	<view>
		<uni-popup ref="popup" type="bottom" :animation="true" @change="change">
			<view  class="popup_content" >
				<view class="popup_search">
					<view class="search">
						<view class="icon_search"><uni-icons :type="icons[0].type" color="#333333" :size="icons[0].size" /></view>
						<view class="search_input">
							<input v-model="params.search_info" @input="searchInfo" placeholder-style="font-size:26rpx" placeholder="关键字搜索" value="" />
						</view>
						<view class="icon_search"></view>
					</view>
					<view class="seach_info" @click="searchInfo">搜索</view>
				</view>	
							
				<view class="popup_box_list">
					<scroll-view  class="scroll-view_H" :style="'height:'+scrollHeight"  scroll-y="true" scroll-left="0">
						<view v-for="(item,index) in dataList" :key="index" @click="selectInfo(index)" class="scroll-view-item_H" >
							<view class="popup_list_item">
								<view class="item_left">
									<view class="item_left_top">
										<view class="item_title">{{item.user_name}}</view>
									
										<view class="item_type">{{item.user_code}}</view>
									</view>
									<view class="item_left_bottom">
										<view class="left_bottom_box">
											手机：{{item.tel}}
										</view>
										
										<view class="left_bottom_box" v-if="item.email">
											{{item.email}}
										</view>
									</view>
								</view>
								
								<view class="item_right">
									<uni-icons v-if="selectItem['id']==item.id" :type="icons[3].type" color="#910a15" :size="icons[3].size" />
								</view>
							</view>
						</view>
					</scroll-view>
				</view>	
				
				<view class="confirm_box">
					<view style="margin:auto;margin-top: 20rpx; margin-bottom: 20rpx; width: 300rpx; ">
						<button type="default" class="button"  size="mini" style="width:100%;background-color: #910a15;color: #fff; font-size: 30rpx;" @click="confirmSelect()">点击确认</button>				
					</view>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>
<script>

</script>


<script>
	import {api} from '@/pages/product/detail/libs/api.js';
	var _self;
	export default {
		name: 'orderSalerPopup',
		props: {
			show:{type:Boolean,default:false},
			dataInfo:{type:Object,default:{}}
		},
		watch:{
			popupShow(val){
				this.$emit('update:show', val);
				this.popupOpt();
			},
			
			show(val) {
				this.initData();
				this.popupShow = val;
				this.popupOpt();
			},

			selectItem(val){
				this.$emit('update:dataInfo', val);
			},
			
			dataInfo(val) {
				this.selectItem = val;
			}
		},
		data() {
			return {
				params:{
					page: 1,
					pageSize: 20,
				},
		
				selectItem:{},
				dataList:[],
				popupShow:this.show,
				scrollHeight:uni.getSystemInfoSync().windowHeight*0.6+"px",
				icons:[
					{type:"search",size:uni.upx2px(30)},
					{type:"camera",size:uni.upx2px(30)},
					{type:"search",size:uni.upx2px(40)},
					{type:"checkmarkempty",size:uni.upx2px(60)},
				],
				dateNow: new Date().Format("yyyy-MM-dd"),
			}
		},
		created() {
			_self=this;
		},
		
		methods:{
			
			initData: async function(){
				let retData=await api.appUserList(this.params);
				this.dataList=retData.dataList;
			},
			
			change:function(e) {
				this.popupShow=e.show;
			},
			
			popupOpt:function(show){
				if(this.popupShow){
					this.$refs.popup.open('bottom');
				}else{
					this.$refs.popup.close();
				}
			},
			searchInfo:function(show){
				this.initData();
			},
			selectInfo:function(index){
				this.selectItem=this.dataList[index];
			},
			
			confirmSelect:function(){
				this.$refs.popup.close();
			}
			

		}
			
		  
	
		
	}
</script>


<style>
	@import 'order-saler-popup.css';
</style>
